import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:qyou_app/common/base.dart';
import 'package:qyou_app/common/bloc.dart';
import 'package:qyou_app/model/video.dart';

class VideoPage extends StatelessWidget with Base {
  // 跳转直播间
  void _goToLiveRoom(context, item) {
    Navigator.pushNamed(context, '/room', arguments: item);
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<VideoPageNoCubit, int>(builder: (ctx, indexState) {
      return Container(
        color: Color(0xfff1f5f6),
        child: Column(children: <Widget>[
          _videoTable(context),
        ]),
      );
    });
  }

  // 直播列表详情
  Widget _videoTable(context) {
    List<Video> videoList = BlocProvider.of<VideoCubit>(context).state;
    final liveList = List<Widget>();

    //字体样式
    var fontStyle = TextStyle(
      color: Colors.white,
      fontSize: dp(10),
    );
    //每个单元的宽度
    var boxWidth = dp(175);
    //图片高度
    var imageHeight = dp(100);

    //遍历每个视频数据
    videoList.asMap().keys.forEach((index) {
      //一个视频数据
      var item = videoList[index];
      liveList.add(
        GestureDetector(
          onTap: () => _goToLiveRoom(context, item),
          child: Padding(
            padding: EdgeInsets.all(4),
            child: ClipRRect(
              //圆角裁剪
              borderRadius: BorderRadius.all(Radius.circular(dp(5))),
              child: Container(
                width: boxWidth,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    //图片
                    CachedNetworkImage(
                      imageUrl: item.pic,
                      //图片上文字信息
                      imageBuilder: (context, imageProvider) => Container(
                        height: imageHeight, //图片高度
                        decoration: BoxDecoration(
                          //图片装饰
                          image: DecorationImage(
                              image: imageProvider, fit: BoxFit.fill),
                        ),
                        child: Stack(
                          children: <Widget>[
                            Positioned(
                              left: 0,
                              bottom: 0,
                              child: Container(
                                width: boxWidth,
                                height: dp(25),
                                child: Row(
                                  children: <Widget>[
                                    SizedBox(
                                      width: dp(65),
                                      child: Row(
                                        children: <Widget>[
                                          Padding(
                                              padding:
                                                  EdgeInsets.only(left: 5)),
                                          Image.asset(
                                            "assets/common/view.png",
                                            height: dp(12),
                                          ),
                                          Padding(
                                              padding:
                                                  EdgeInsets.only(left: 5)),
                                          Text(
                                            item.view,
                                            style: fontStyle,
                                          ),
                                        ],
                                      ),
                                    ),
                                    SizedBox(
                                      width: dp(65),
                                      child: Row(
                                        children: <Widget>[
                                          Padding(
                                              padding:
                                                  EdgeInsets.only(left: dp(5))),
                                          Image.asset(
                                            "assets/common/comment.png",
                                            height: dp(12),
                                          ),
                                          Padding(
                                              padding:
                                                  EdgeInsets.only(left: dp(5))),
                                          Text(
                                            item.view,
                                            style: fontStyle,
                                          ),
                                        ],
                                      ),
                                    ),
                                    SizedBox(
                                      width: dp(35),
                                      child: Text(
                                        item.duration,
                                        style: fontStyle,
                                        textAlign: TextAlign.right,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      //数据占位
                      placeholder: (context, url) => Image.asset(
                        'assets/common/null.png',
                        height: imageHeight,
                        fit: BoxFit.fill,
                      ),
                    ),
                    //标题部分
                    Container(
                      color: Colors.white,
                      child: Column(
                        children: <Widget>[
                          SizedBox(
                            height: dp(25),
                            child: Container(
                              padding: EdgeInsets.all(dp(2)),
                              width: boxWidth,
                              child: Text(
                                item.title,
                                textAlign: TextAlign.start,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(fontSize: dp(14)),
                              ),
                            ),
                          ),
                          Row(
                            children: <Widget>[
                              SizedBox(
                                width: dp(150),
                                child: Row(
                                  children: <Widget>[
                                    Padding(
                                      padding: EdgeInsets.all(dp(5)),
                                      child: Image.asset(
                                        "assets/common/up.png",
                                        height: dp(15),
                                      ),
                                    ),
                                    Text(
                                      item.owner,
                                      style: TextStyle(
                                          fontSize: 12,
                                          fontFamily: "fontFamily",
                                          color: Color(0xFF707070)),
                                    ),
                                  ],
                                ),
                              ),
                              SizedBox(
                                width: dp(25),
                                child: Container(
                                  alignment: Alignment.centerRight,
                                  child: Image.asset(
                                    "assets/common/more.png",
                                    height: dp(10),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      );
    });

    return Wrap(
      children: liveList,
    );
  }
}
